<template>
  <div class="app-container">
    <table class="tb-table">
      <tr>
        <td class="tb-title" width="15%">用户编号:</td>
        <td colspan="3">
          {{ this.form.id }}
        </td>
      </tr>
      <tr>
        <td class="tb-title" width="15%">公司名称:</td>
        <td colspan="3">
          {{ this.form.companyName }}
        </td>
      </tr>
      <tr>
        <td class="tb-title" width="15%">昵称:</td>
        <td width="35%">
          {{ this.form.nickName }}
        </td>
        <td class="tb-title" width="15%">用户名:</td>
        <td width="35%">
          {{ this.form.userName }}
          <el-tooltip class="item" effect="dark" content="作为系统登录名" placement="top-start">
            <i class="el-icon-warning-outline"/>
          </el-tooltip>
        </td>
      </tr>
      <tr>
        <td class="tb-title" width="15%">身份证号码:</td>
        <td width="35%">
          {{ this.form.idCard }}
        </td>
        <td class="tb-title" width="15%">出生年月:</td>
        <td width="35%">
          {{ this.form.birthDate }}
        </td>
      </tr>
      <tr>
        <td class="tb-title" width="15%">邮箱:</td>
        <td width="35%">
          {{ this.form.email }}
        </td>
        <td class="tb-title" width="15%">手机号:</td>
        <td width="35%">
          <el-tag type="success" size="mini"> {{ this.form.phone }}</el-tag>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
import { getOne } from '@/api/sysUser'

export default {
  name: 'BaseInfo',
  props: ['userId'],
  data() {
    return {
      form: {
        companyName: '',
        nickName: '',
        userName: '',
        idCard: '',
        email: '',
        phone: ''
      }
    }
  },
  methods: {
    handleQuery() {
      getOne(this.userId).then(res => {
        if (res.code === 20000) {
          this.form = res.data
        }
      })
    }
  },
  mounted() {
    this.handleQuery()
  }
}
</script>

<style scoped>
.tb-table {
  width: 100% !important;
}
</style>
